<template>
    <div class="map-parent-view">
        <div
            id="mapContainer"
            style="width: 100%;position: relative;height: calc(100vh - 70px)">

            <div class="top-button-view">
                <div class="top-view-item top-view-item-car"
                     :class="topButtonSelect === '车辆' ? 'top-view-select' : 'top-view-default' "
                     @click="showVehicleMonitoring">
                    <div class="left">
                        <img
                            style="width: 25px;height: 25px;"
                            src="/static/img/car_icon.png"/>
                    </div>
                    <div class="right">
                        <div class="top">车辆</div>
                        <div class="bottom">
                            <span class="bottom-left">{{mapMarkCntStat.vehicleCnt}}</span>
                            <span class="bottom-right">辆</span>
                        </div>
                    </div>
                </div>

                <div class="top-view-item top-view-item-worksite"
                     :class="topButtonSelect === '工地' ? 'top-view-select' : 'top-view-default' "
                     @click="getWorkSiteList">
                    <div class="left">
                        <img
                            style="width: 25px;height: 25px;"
                            src="/static/img/worksite_icon.png"/>
                    </div>
                    <div class="right">
                        <div class="top">工地</div>
                        <div class="bottom">
                            <span class="bottom-left">{{mapMarkCntStat.buildingSiteCnt}}</span>
                            <span class="bottom-right">个</span>
                        </div>
                    </div>
                </div>


                <div class="top-view-item top-view-item-disposalsite"
                     :class="topButtonSelect === '消纳场' ? 'top-view-select' : 'top-view-default' "
                     @click="getDisposalSiteList">
                    <div class="left">
                        <img
                            style="width: 25px;height: 25px;"
                            src="/static/img/disposalsite_icon.png"/>
                    </div>
                    <div class="right">
                        <div class="top">消纳场</div>
                        <div class="bottom">
                            <span class="bottom-left">{{mapMarkCntStat.disposalSiteCnt}}</span>
                            <span class="bottom-right">个</span>
                        </div>
                    </div>
                </div>

                <div class="top-view-item top-view-item-line"
                     :class="topButtonSelect === '路线' ? 'top-view-select' : 'top-view-default' "
                    @click="getNewApprovedLine">
                    <div class="left">
                        <img
                            style="width: 25px;height: 25px;"
                            src="/static/img/line_icon.png"/>
                    </div>
                    <div class="right">
                        <div class="top">路线</div>
                        <div class="bottom">
                            <span class="bottom-left">{{mapMarkCntStat.lineCnt}}</span>
                            <span class="bottom-right">条</span>
                        </div>
                    </div>
                </div>

            </div>




            <el-card class="left-float-view" v-show="leftFloatShow">
                <div class="header-view">
                    <div class="header-left"></div>
                    <div class="header-right">
                        <img src="/static/img/close_btn_icon.png" class="close-btn" @click="leftFloatCardClose">
                    </div>
                </div>
                <div class="bottom-view">
                    <div class="top-search-view-card search-view">
                        <el-form :model="treeNodeSearchForm">
                            <el-row>
                                <el-col :span="9">
                                    <el-form-item>
                                        <el-input
                                            clearable
                                            placeholder="车牌号"
                                            v-model="treeNodeSearchForm.plateNo">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item>
                                        <el-input
                                            clearable
                                            placeholder="运输单位"
                                            v-model="treeNodeSearchForm.enterprise">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item>
                                        <el-button
                                            class="search-button"
                                            @click="treeNodeSearch">
                                            查询
                                        </el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>

                    <div class="tree-view">
                        <el-scrollbar class="tree-view">
                            <el-tree
                                ref="tree"
                                @node-click="handleNodeClick"
                                default-expand-all
                                :expand-on-click-node="false"
                                :filter-node-method="filterNode"
                                :highlight-current="true"
                                icon-class=" "
                                :data="treeData">
                              <span class="custom-tree-node" slot-scope="{ node, data}" style="width: 100%;">
                                  <span v-if="data.nodeType === '市区'" class="tree-node-row">
                                      <img
                                        src="/static/img/tree_root_icon.png"
                                        style="width: 15px;height: 15px;margin-right: 5px;"
                                        @click.stop="expandedNode(node)">
                                      <span style="flex: 1;">{{data.label}}</span>
                                      <img
                                        src="/static/img/down_arrow.png"
                                        style="width: 15px;height: 10px;margin-right: 10px;transform:rotate(180deg);"
                                        @click.stop="expandedNode(node)"
                                        v-if="!node.expanded">
                                      <img
                                        src="/static/img/down_arrow.png"
                                        style="width: 15px;height: 10px;margin-right: 10px;"
                                        @click.stop="expandedNode(node)"
                                        v-if="node.expanded">
                                  </span>
                                  <span v-if="data.nodeType === '区域'">
                                      <img
                                          src="/static/img/tree_area_icon.png"
                                          style="width: 15px;height: 15px;"
                                          @click.stop="expandedNode(node)"
                                          v-if="!node.expanded">
                                      <img
                                          src="/static/img/tree_area_expanded_icon.png"
                                          style="width: 15px;height: 15px;"
                                          @click.stop="expandedNode(node)"
                                          v-if="node.expanded">
                                      <span>{{data.label}}</span>
                                  </span>
                                  <span v-if="data.nodeType === '运输企业'">
                                      <img
                                          src="/static/img/tree_enterprise_icon.png"
                                          style="width: 15px;height: 15px;"
                                          @click.stop="expandedNode(node)"
                                          v-if="!node.expanded">
                                       <img
                                           src="/static/img/tree_enterprise_expanded_icon.png"
                                           style="width: 15px;height: 15px;"
                                           @click.stop="expandedNode(node)"
                                           v-if="node.expanded">
                                      <span>{{data.label}}</span>
                                  </span>
                                  <span v-if="data.nodeType === '车辆'">
                                      <img
                                          v-if=" data.metaStatus.onlineStatus === 'ONLINE'"
                                          src="/static/img/car_icon.svg"
                                          style="width: 10px;height: 10px;">
                                      <img
                                          v-if="data.metaStatus.onlineStatus === 'OFFLINE'"
                                          src="/static/img/car_gray_icon.svg"
                                          style="width: 10px;height: 10px;">
                                      <span :style="{color:node.isCurrent ? '#1E87F0' : ''}">{{data.label}}</span>
                                  </span>
                              </span>
                            </el-tree>
                        </el-scrollbar>
                    </div>


                </div>
            </el-card>


            <el-card style="z-index: 999;position: absolute;bottom: 0;width: 100%;" v-if="bottomTableShow" class="bottom-view">
                <div class="header-view">
                    <div class="header-left">
                        <div class="title-icon"></div>
                        <span>历史轨迹</span>
                    </div>
                    <div class="header-right">
                        <img
                            style="float: right; padding: 3px 0;cursor: pointer;height: 25px;width: 25px;"
                            src="/static/img/close_btn_icon.png"
                            @click="bottomTableShow = false">
                    </div>
                </div>

                <el-table height="200px" :data="hisTrackInfoList">
                    <el-table-column align="center" label="uid" v-if="false"/>
                    <el-table-column align="center" label="车牌号" prop="plateNo"/>
                    <el-table-column align="center" label="速度km/h" prop="speed"/>
                    <el-table-column align="center" label="方向" prop="direction"/>
                    <el-table-column align="center" label="定位时间" prop="posTime"/>
                    <el-table-column align="center" label="地理位置" prop="address" width="600px"/>
                </el-table>
            </el-card>

            <el-card shadow="never" class="right-bottom-float" v-if="rightBottomShow">
                <div class="header-view">
                    <div class="header-left">
                        <div class="title-icon"></div>
                        <span>轨迹播放</span>
                    </div>

                    <img
                        style="float: right; padding: 3px 0;cursor: pointer;height: 25px;width: 25px;"
                        src="/static/img/close_btn_icon.png"
                        @click="closeRightBottom">
                </div>
                <el-row>
                    <el-row class="card-center">
                        <el-form label-width="80px" :model="hisTrackPointForm">
                            <el-form-item label="车牌号">
                                <el-select
                                    v-model="hisTrackPointForm.vehicleNo"
                                    style="width: 200px;">
                                    <el-option
                                        v-for="item in vehicleList"
                                        :label="item.plateNo"
                                        :value="item.plateNo">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="开始时间">
                                <el-date-picker
                                    type="datetime"
                                    style="width: 200px;"
                                    v-model="hisTrackPointForm.startTime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                />
                            </el-form-item>
                            <el-form-item label="截止时间">
                                <el-date-picker
                                    type="datetime"
                                    style="width: 200px;"
                                    v-model="hisTrackPointForm.endTime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                />
                            </el-form-item>
                        </el-form>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <el-button round type="primary" @click="searchHisTrackPointSet">查询</el-button>
                    </el-row>
                </el-row>
            </el-card>
        </div>


        <vehicle-info-window ref="infoWindow" @onHistoryClick="getHisTrackInfo" @onRealTimeClick="getRealTimeTrack" @showVideo="showVideo"></vehicle-info-window>

        <work-site-info-window ref="workSiteInfoWindow"></work-site-info-window>

        <disposal-site-info-window ref="disposalSiteInfoWindow"></disposal-site-info-window>

        <el-dialog :visible.sync="videoMonitoringVisible" fullscreen @close="stopPlayVideo">
            <video-monitoring ref="videoMonitoring" :vehicleInfo="playDialogVehicleInfo" v-if="videoMonitoringVisible"></video-monitoring>
        </el-dialog>

    </div>
</template>

<script>
import MapLoader from '../../plugins/amap'
import VehicleInfoWindow from './vehicleInfoWindow'
import MapUILoader from '../../plugins/amapui'
import {buildingSiteQueryAllMapSite, buildingSiteQueryList} from '../../api/buildingSite'
import WorkSiteInfoWindow from './workSiteInfoWindow'
import {disposalSiteQueryAllMapMarkSet, disposalSiteQueryList} from '../../api/disposalSite'
import DisposalSiteInfoWindow from './disposalSiteInfoWindow'
import {treeNodeQueryTreeNodeFromRedis} from '../../api/treeNode'
import {queryVehicleList, vehicleQueryForRealMonitor} from '../../api/vehicle'
import {
    vehicleMonitorMapMarkCntStat,
    vehicleMonitorQueryHisTrackInfo,
    vehicleMonitorQueryHisTrackPoint
} from '../../api/vehicleMonitor'
import {trackSpotInsertSpotToRedis, trackSpotQueryTrackSpotFromRedis} from '../../api/trackSpot'
import VideoMonitoring from '../videoMonitoring'
import {disposalCertLineQueryNewApprovedLine} from '../../api/disposalCertLine'
import {QueryHisTrackPoint, queryHisTruckList, queryLastHourTruckPoint} from '../../api/truckPosRecord'

export default {
    name: "VehicleMonitoring",
    components: {VideoMonitoring, DisposalSiteInfoWindow, WorkSiteInfoWindow, VehicleInfoWindow},
    data(){
        return{
            mapHeight:0,
            leftFloatShow:false,
            mapMarkCntStat:{
                vehicleCnt:0,
                buildingSiteCnt:0,
                disposalSiteCnt:0,
                lineCnt:0
            },
            vehicleMonitoringList:[],
            workSiteList:[],
            disposalSiteList:[],
            treeData:[],
            treeNodeSearchForm:{
                plateNo:null,
                enterprise:null,
            },
            vehicleSearchForm:{
                areaCode:null,
                enterpriseUid:null,
                plateNo:null,
                onlineStatus:null,
                alertStatus:null,
            },
            topButtonSelect:null,
            realTimeTrackInterval:null,
            bottomTableShow:false,
            rightBottomShow:false,
            hisTrackInfoList:[],
            hisTrackPointForm:{
                vehicleNo:null,
                startTime:null,
                endTime:null,
            },
            hisTrackPointSet:[],
            videoMonitoringVisible:false,
            playDialogVehicleInfo:null,
            newApprovedLines:[],
            vehicleList:[]
        }
    },
    methods:{
        initMapSize(){
            const doc = document
            const height = doc.documentElement.clientHeight || doc.body.clientHeight
            this.mapHeight = height - 70
        },
        initMap(){
            MapLoader().then(AMap => {
                console.log('地图加载成功')
                this.map = new AMap.Map("mapContainer", {
                    resizeEnable: true
                })
                //设置默认点 雄县
                this.map.setCenter([116.108624,38.994825])
            }, e => {
                console.log('地图加载失败' ,e)
            })
        },
        showVehicleMonitoring(){
            this.topButtonSelectChange('车辆')
            this.leftFloatShow = true
            // this.getVehicleMonitoringMarkers()
            this.getTreeNode()
        },
        addVehicleMonitoringMarkers(){
            const iconMap = {
                green:"/static/img/car_icon.svg",
                red:"/static/img/car_red_icon.svg",
                gray:"/static/img/car_gray_icon.svg"
            }
            if (!this.vehicleMonitoringList){
                return
            }
            const markers = []
            for (let item of this.vehicleMonitoringList){
                let iconImage
                if (item.onlineStatus === 'ONLINE'){
                    iconImage = iconMap.green
                }
                // else if (item.onlineStatus === 'ONLINE' && item.alertStatus === 'ALERT'){
                //     iconImage = iconMap.red
                // }
                else if (item.onlineStatus === 'OFFLINE'){
                    iconImage = iconMap.gray
                }
                // 创建 AMap.Icon 实例：
                const icon = new AMap.Icon({
                    size: new AMap.Size(25, 25),    // 图标尺寸
                    image: iconImage,  // Icon的图像
                    imageSize: new AMap.Size(25, 25) ,  //  angle:ag - 90 根据所设置的大小拉伸或压缩图片

                })
                const marker = new AMap.Marker({
                    icon: icon,
                    position: [item.lgt,item.lat],
                })
                marker.setLabel({
                    offset:new AMap.Pixel(0,0),//设置文本标注偏移量
                    content:"<div>"+item.plateNo+"</div>",//设置文本标注内容
                    direction:'bottom'//设置文本标注方位
                })
                marker.on("click",(e)=>{
                    this.showInfoWindow(e,item)
                    // this.addPath()
                })
                this.map.add(marker)
                markers.push(marker)
            }
            return markers;
        },
        showInfoWindow(e,item){
            const infoWindow = new AMap.InfoWindow({
                // 使用自定义窗体
                isCustom: true,
                // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
                content: this.$refs['infoWindow'].$el,
                // 设置定位偏移量
                offset: new AMap.Pixel(-9, -60)
            })
            // 信息窗口打开
            this.$refs['infoWindow'].open(item)
            infoWindow.open(this.map, e.target.getPosition())
        },
        getVehicleMonitoringMarkers(){
            this.map.clearMap()
            const param = Object.assign({},this.vehicleSearchForm)
            vehicleQueryForRealMonitor(param).then(response => {
                console.log(response)
                this.vehicleMonitoringList = response.data.data.rows
                const markers =  this.addVehicleMonitoringMarkers()
                this.map.setFitView(markers)
            }).catch(error => {
                console.log(error)
            })
        },
        handleNodeClick(data,node,tree){
            console.log('===>',data,node,tree)
            clearInterval(this.realTimeTrackInterval)
            this.bottomTableShow = false
            this.rightBottomShow = false
            this.clearVehicleSearchForm()
            if (data.nodeType === '市区'){

            }
            if (data.nodeType === '区域'){
                this.vehicleSearchForm.areaCode = data.code
            }
            if (data.nodeType === '运输企业'){
                this.vehicleSearchForm.enterpriseUid = data.code
            }
            if (data.nodeType === '车辆'){
                this.vehicleSearchForm.plateNo = data.label
                console.log(111111)
            }
            this.getVehicleMonitoringMarkers()
        },
        clearVehicleSearchForm(){
          Object.keys(this.vehicleSearchForm).forEach((key) => {
              this.vehicleSearchForm[key] = null
          })
        },
        addPolygon(){
            this.map.clearMap()
            const path = [
                [108.939313,34.217984],
                [108.946458,34.217993],
                [108.946416,34.214604],
                [108.939227,34.214604]
            ]
            const polygon = new AMap.Polygon({
                path: path,
                strokeColor: "#D9001B",
                strokeWeight: 2,
                strokeStyle: 'line',
                strokeOpacity: 1,
                fillOpacity: 0.1,
                fillColor: '#e06a7b',
                zIndex: 50,
            })

            this.map.add(polygon)
            // 缩放地图到合适的视野级别
            // this.map.setFitView([polygon])
        },
        addPath(){
            const map = this.map
            MapUILoader().then(AMapUI => {
                AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'],(PathSimplifier, $) => {
                    if (!PathSimplifier.supportCanvas) {
                        return
                    }
                    const pathSimplifierIns = new PathSimplifier({
                        zIndex: 100,
                        //autoSetFitView:false,
                        map: map, //所属的地图实例
                        getPath:(pathData, pathIndex) => {
                            return pathData.path;
                        },
                        getHoverTitle:(pathData, pathIndex, pointIndex) => {
                            if (pointIndex >= 0) {
                                //point
                                return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                            }
                            return pathData.name + '，点数量' + pathData.path.length;
                        },
                        renderOptions: {
                            renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
                        }
                    })
                    window.pathSimplifierIns = pathSimplifierIns
                    //设置数据
                    pathSimplifierIns.setData([{
                        name: '路线0',
                        path: [
                            [116.405289, 39.904987],
                            [113.964458, 40.54664],
                            [111.47836, 41.135964],
                            [108.949297, 41.670904],
                            [106.380111, 42.149509],
                            [103.774185, 42.56996],
                            [101.135432, 42.930601],
                            [98.46826, 43.229964],
                            [95.777529, 43.466798],
                            [93.068486, 43.64009],
                            [90.34669, 43.749086],
                            [87.61792, 43.793308]
                        ]
                    }]);
                    //对第一条线路（即索引 0）创建一个巡航器
                    const navg1 = pathSimplifierIns.createPathNavigator(0, {
                        loop: true, //循环播放
                        speed: 1000000 //巡航速度，单位千米/小时
                    })
                    navg1.start()
                });
            }, e => {
                console.log('地图UI加载失败' ,e)
            })
        },
        getWorkSiteList(){
            this.topButtonSelectChange('工地')
            const param = {}
            console.log(param)
            buildingSiteQueryAllMapSite(param).then(response => {
                console.log(response)
                const data = response.data.data
                this.workSiteList = data.rows
                this.setWorkSiteListMarker()
            }).catch(error => {
                console.log(error)
            })
        },
        setWorkSiteListMarker(){
            this.map.clearMap()
            if (!this.workSiteList){return}
            const markers = []
            for (let i = 0;i < this.workSiteList.length;i++ ){
                const item = this.workSiteList[i]
                if (!item.longitude || !item.latitude){
                    continue
                }
                // 创建 AMap.Icon 实例：
                const icon = new AMap.Icon({
                    size: new AMap.Size(30, 30),    // 图标尺寸
                    image: '/static/img/work_site_pos_icon.svg',  // Icon的图像
                    imageSize: new AMap.Size(30, 30)   // 根据所设置的大小拉伸或压缩图片
                })
                const marker = new AMap.Marker({
                    position: [item.longitude,item.latitude],
                    icon:icon,
                })
                marker.setLabel({
                    offset:new AMap.Pixel(0,0),//设置文本标注偏移量
                    content:"<div>"+item.name+"</div>",//设置文本标注内容
                    direction:'bottom'//设置文本标注方位
                })
                marker.on("click",(e)=>{
                    this.showWorkSiteInfoWindow(e,item)
                    // this.addPath()
                })
                this.map.add(marker)
                markers.push(marker)
            }
            this.map.setFitView(markers)
        },
        showWorkSiteInfoWindow(e,item){
            const infoWindow = new AMap.InfoWindow({
                // 使用自定义窗体
                isCustom: true,
                // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
                content: this.$refs['workSiteInfoWindow'].$el,
                // 设置定位偏移量
                offset: new AMap.Pixel(-9, -60)
            })
            // 信息窗口打开
            this.$refs['workSiteInfoWindow'].open(item)
            infoWindow.open(this.map, e.target.getPosition())
        },
        getDisposalSiteList(){
            this.topButtonSelectChange('消纳场')
            const param = {}
            console.log(param)
            disposalSiteQueryAllMapMarkSet(param).then(response => {
                console.log(response)
                const data = response.data.data
                this.disposalSiteList = data.rows
                this.setDisposalSiteListMarker()
            }).catch(error => {
                console.log(error)
            })
        },
        setDisposalSiteListMarker(){
            this.map.clearMap()
            const markers = []
            for (let i = 0;i < this.disposalSiteList.length;i++ ){
                const item = this.disposalSiteList[i]
                if (!item.longitude || !item.latitude){
                    continue
                }
                // 创建 AMap.Icon 实例：
                const icon = new AMap.Icon({
                    size: new AMap.Size(30, 30),    // 图标尺寸
                    image: '/static/img/disposal_site_pos_icon.svg',  // Icon的图像
                    imageSize: new AMap.Size(30, 30)   // 根据所设置的大小拉伸或压缩图片
                })
                const marker = new AMap.Marker({
                    position: [item.longitude,item.latitude],
                    icon:icon
                })
                marker.setLabel({
                    offset:new AMap.Pixel(0,0),//设置文本标注偏移量
                    content:"<div>"+item.name+"</div>",//设置文本标注内容
                    direction:'bottom'//设置文本标注方位
                })
                marker.on("click",(e)=>{
                    this.showDisposalSiteInfoWindow(e,item)
                    // this.addPath()
                })
                this.map.add(marker)
                markers.push(marker)
            }
            this.map.setFitView(markers)
        },
        showDisposalSiteInfoWindow(e,item){
            const infoWindow = new AMap.InfoWindow({
                // 使用自定义窗体
                isCustom: true,
                // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
                content: this.$refs['disposalSiteInfoWindow'].$el,
                // 设置定位偏移量
                offset: new AMap.Pixel(-9, -60)
            })
            // 信息窗口打开
            this.$refs['disposalSiteInfoWindow'].open(item)
            infoWindow.open(this.map, e.target.getPosition())
        },
        getTreeNode(){
            const param = {}
            treeNodeQueryTreeNodeFromRedis(param).then(response => {
                this.treeData = []
                this.treeData.push(response.data.data)
            }).catch(error => {
                console.log(error)
            })
        },
        treeNodeSearch(){
            let data = Object.assign({},this.treeNodeSearchForm)
            if (!data.plateNo && !data.enterprise){
                data = null
            }
            this.$refs.tree.filter(data)
        },
        filterNode(value, data,node) {
            if (!value) return true
            let parentNode = node.parent, labels = [node.label], level = 1
            while (level < node.level) {
                labels = [...labels, parentNode.label]
                parentNode = parentNode.parent
                level++
            }
            return labels.some(label => {
                if (value.enterprise && value.plateNo){
                    console.log('enterprise plateNo')
                    return label.indexOf(value.enterprise) !== -1 || label.indexOf(value.plateNo) !== -1
                }else {
                    if (value.enterprise){
                        console.log('enterprise')
                        return label.indexOf(value.enterprise) !== -1
                    }else if(value.plateNo){
                        console.log('plateNo')
                        return label.indexOf(value.plateNo) !== -1
                    }
                }
            })
        },
        leftFloatCardClose(){
            this.leftFloatShow = false
        },
        topButtonSelectChange(select){
            this.topButtonSelect = select
            this.leftFloatCardClose()
            this.map.clearMap()
            clearInterval(this.realTimeTrackInterval)
            this.bottomTableShow = false
            this.rightBottomShow = false
        },
        getMapMarkCntStat(){
            const param = {}
            vehicleMonitorMapMarkCntStat(param).then(response => {
                console.log(response)
                this.mapMarkCntStat = response.data.data
            }).catch(error => {
                console.log(error)
            })
        },
        // getRealTimeTrack(data){
        //     this.bottomTableShow = false
        //     this.rightBottomShow = false
        //     clearInterval(this.realTimeTrackInterval)
        //     let isFirst = true
        //     const param = {
        //         vehicleNo:data.plateNo,
        //         index:localStorage.getItem('index')
        //     }
        //     trackSpotInsertSpotToRedis(param).then(response => {
        //         this.queryTrackSpotFromRedis(data,isFirst)
        //         isFirst = false
        //         this.realTimeTrackInterval = setInterval(()=>{
        //         this.queryTrackSpotFromRedis(data,isFirst)
        //         },1000 * 5)
        //     }).catch(error => {
        //         console.log(error)
        //     })
        // },
        getRealTimeTrack(data){
            this.bottomTableShow = false
            this.rightBottomShow = false
            clearInterval(this.realTimeTrackInterval)
            let isFirst = false
            this.queryTrackSpotFromRedis(data,isFirst)
            isFirst = false
            this.realTimeTrackInterval = setInterval(()=>{
                this.queryTrackSpotFromRedis(data,isFirst)
            },1000 * 5)
        },

        queryTrackSpotFromRedis(data,isFirst){
            const param = {
                plateNo:data.plateNo
            }
            queryLastHourTruckPoint(param).then(response => {
                console.log("==>",response)
                this.setTrackLine(response.data.data,isFirst)
            }).catch(error => {
                console.log(error)
            })
        },


        // queryTrackSpotFromRedis(data,isFirst){
        //     const param = {
        //         vehicleNo:data.plateNo
        //     }
        //     trackSpotQueryTrackSpotFromRedis(param).then(response => {
        //         console.log("==>",response)
        //         this.setTrackLine(response.data.data,isFirst)
        //         localStorage.setItem("index",response.data.data.lastIndex)
        //         console.log(localStorage.getItem('index'))
        //     }).catch(error => {
        //         console.log(error)
        //     })
        // },
        setTrackLine(data,isFirst){
            this.map.clearMap()
            this.addVehicleMonitoringMarkers()
            const path = []
            for (let item of data.pointSet){
                path.push([item.lng,item.lat])
            }
            if (path.length <= 0){
                return
            }
            let start,end
            if (path.length === 1){
                start = this.myLatLng(path[path.length - 1][0], path[path.length - 1][1])
                end = start
            }else {
                start = this.myLatLng(path[path.length - 2][0], path[path.length - 2][1]);
                end = this.myLatLng(path[path.length - 1][0], path[path.length - 1][1]);
            }
            const ag = this.getAngel(start,end)
            const icon = new AMap.Icon({
                size: new AMap.Size(30, 30),    // 图标尺寸
                image: '/static/img/car.svg',  // Icon的图像
                imageSize: new AMap.Size(30, 30)   // 根据所设置的大小拉伸或压缩图片
            })
            const marker = new AMap.Marker({
                map: this.map,
                position: path[path.length - 1],
                // icon: "https://webapi.amap.com/images/car.png",
                icon:icon,
                // offset: new AMap.Pixel(-26, -13),
                autoRotation: true,
                angle:ag - 90,
            })
            // 绘制轨迹
            const polyline = new AMap.Polyline({
                map: this.map,
                path: path,
                showDir:true,
                strokeColor: "#28F",  //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6,      //线宽
                // strokeStyle: "solid"  //线样式
            })
            if (isFirst){
                this.map.setFitView([marker])
            }
        },
        getAngel(A, B) {
            const dx = (B.m_RadLo - A.m_RadLo) * A.Ed;
            const dy = (B.m_RadLa - A.m_RadLa) * A.Ec;
            let angle = 0.0;
            angle = Math.atan(Math.abs(dx / dy)) * 180. / Math.PI;
            const dLo = B.m_Longitude - A.m_Longitude;
            const dLa = B.m_Latitude - A.m_Latitude;
            if (dLo > 0 && dLa <= 0) {
                angle = (90. - angle) + 90;
            } else if (dLo <= 0 && dLa < 0) {
                angle = angle + 180;
            } else if (dLo < 0 && dLa >= 0) {
                angle = (90 - angle) + 270;
            }
            return angle;
        },
        myLatLng(longitude, latitude) {
            const Rc = 6378137;
            const Rj = 6356725;
            let m_LoDeg, m_LoMin, m_LoSec;
            let m_LaDeg, m_LaMin, m_LaSec;
            let m_Longitude, m_Latitude;
            let m_RadLo, m_RadLa;
            let Ec;
            let Ed;

            m_LoDeg = longitude;
            m_LoMin = Number.parseInt((longitude - m_LoDeg) * 60);
            m_LoSec = (longitude - m_LoDeg - m_LoMin / 60.) * 3600;
            m_LaDeg = latitude;
            m_LaMin = Number.parseInt((latitude - m_LaDeg) * 60);
            m_LaSec = (latitude - m_LaDeg - m_LaMin / 60.) * 3600;
            m_Longitude = longitude;
            m_Latitude = latitude;
            m_RadLo = longitude * Math.PI / 180.;
            m_RadLa = latitude * Math.PI / 180.;
            Ec = Rj + (Rc - Rj) * (90. - m_Latitude) / 90.;
            Ed = Ec * Math.cos(m_RadLa);

            return {
                m_RadLo: m_RadLo,
                m_RadLa: m_RadLa,
                m_Longitude: m_Longitude,
                m_Latitude: m_Latitude,
                Ed: Ed,
                Ec: Ec
            }
        },
        getHisTrackInfo(data){
            console.log(data)
            this.map.clearMap()
            this.addVehicleMonitoringMarkers()
            clearInterval(this.realTimeTrackInterval)
            this.clearHisTrackPointForm()
            this.rightBottomShow = true
            this.getVehicleList(data.plateNo)
        },
        clearHisTrackPointForm(){
            this.hisTrackPointForm = {
                vehicleNo:null,
                    startTime:null,
                    endTime:null,
            }
        },
        getVehicleList(plateNo){
            console.log(plateNo)
            const param = {}
            queryVehicleList(param).then(response => {
                console.log(response)
                this.vehicleList = response.data.data.rows
                this.hisTrackPointForm.vehicleNo = plateNo
            }).catch(error => {
                console.log(error)
            })
        },
        // getHisTrackInfoList(data){
        //     const param = {
        //         vehicleNo:data.vehicleNo,
        //         startTime:data.startTime,
        //         endTime:data.endTime,
        //     }
        //     vehicleMonitorQueryHisTrackInfo(param).then(response => {
        //         this.hisTrackInfoList = response.data.data.rows
        //         this.bottomTableShow = true
        //     }).catch(error => {
        //         console.log(error)
        //     })
        // },

        getHisTrackInfoList(data){
            const param = {
                plateNo:data.vehicleNo,
                startDateTime:data.startTime,
                endDateTime:data.endTime,
            }
            queryHisTruckList(param).then(response => {
                this.hisTrackInfoList = response.data.data
                this.bottomTableShow = true
            }).catch(error => {
                console.log(error)
            })
        },
        searchHisTrackPointSet(){
            this.map.clearMap()
            this.addVehicleMonitoringMarkers()
            const param = {
                vehicleNo:this.hisTrackPointForm.vehicleNo,
                startTime:this.hisTrackPointForm.startTime,
                endTime:this.hisTrackPointForm.endTime,
            }
            // vehicleMonitorQueryHisTrackPoint(param).then(response => {
            //     console.log(response)
            //     this.hisTrackPointSet = response.data.data.pointSet
            //     this.HisTrackPointSetLine()
            //     this.getHisTrackInfoList(param)
            // }).catch(error => {
            //     console.log(error)
            // })

            QueryHisTrackPoint(param).then(response => {
                console.log(response)
                this.hisTrackPointSet = response.data.data.pointSet
                this.HisTrackPointSetLine()
                this.getHisTrackInfoList(param)
            }).catch(error => {
                console.log(error)
            })
        },


        HisTrackPointSetLine(){
            const data = this.hisTrackPointSet
            const path = []
            for (let item of data){
                path.push([item.lng,item.lat])
            }
            if (path.length <= 0){
                return
            }
            let start,end
            if (path.length === 1){
                start = this.myLatLng(path[path.length - 1][0], path[path.length - 1][1])
                end = start
            }else {
                start = this.myLatLng(path[path.length - 2][0], path[path.length - 2][1]);
                end = this.myLatLng(path[path.length - 1][0], path[path.length - 1][1]);
            }
            const ag = this.getAngel(start,end)
            const icon = new AMap.Icon({
                size: new AMap.Size(30, 30),    // 图标尺寸
                image: '/static/img/car.svg',  // Icon的图像
                imageSize: new AMap.Size(30, 30) ,  // 根据所设置的大小拉伸或压缩图片
            })
            const marker = new AMap.Marker({
                map: this.map,
                position: path[0],
                angle: ag - 90,
                // icon: "https://webapi.amap.com/images/car.png",
                icon:icon,
                // offset: new AMap.Pixel(-26, -13),
                autoRotation: true,
                angle:ag - 90,
            })
            // 绘制轨迹
            const polyline = new AMap.Polyline({
                map: this.map,
                path: path,
                showDir:true,
                strokeColor: "#28F",  //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6,      //线宽
                // strokeStyle: "solid"  //线样式
            })
            const passedPolyline = new AMap.Polyline({
                map: this.map,
                // path: lineArr,
                strokeColor: "#AF5",  //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6,      //线宽
                // strokeStyle: "solid"  //线样式
            })
            marker.on('moving', (e) => {
                passedPolyline.setPath(e.passedPath)
            })

            this.map.setFitView()

            marker.moveAlong(path, 10000)
        },
        closeRightBottom(){
            this.rightBottomShow = false
        },
        getNewApprovedLine(){
            this.topButtonSelectChange('路线')
            const param = {
                lineCnt:this.mapMarkCntStat.lineCnt
            }
            disposalCertLineQueryNewApprovedLine(param).then(response => {
                this.newApprovedLines = response.data.data.rows
                this.setLines()
            }).catch(error => {
                console.log(error)
            })
        },
        setLines(){
            for (let line of this.newApprovedLines){
                this.setLine(line)
            }
        },
        setLine(line){
            const path = []
            for (let item of line.pointSet){
                path.push([item.lng,item.lat])
            }
            this.setStartMarker(line,path)
            this.setEndMarker(line,path)
            // 绘制轨迹
            const polyline = new AMap.Polyline({
                map: this.map,
                path: path,
                showDir:true,
                strokeColor: this.getRandomColor(),  //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6,      //线宽
                // strokeStyle: "solid"  //线样式
            })
            this.map.setFitView()
        },
        setStartMarker(line,path){
            const icon = new AMap.Icon({
                size: new AMap.Size(30, 30),    // 图标尺寸
                image: '/static/img/work_site_pos_icon.svg',  // Icon的图像
                imageSize: new AMap.Size(30, 30)   // 根据所设置的大小拉伸或压缩图片
            })
            const marker = new AMap.Marker({
                map: this.map,
                position: path[0],
                icon: icon,
                offset: new AMap.Pixel(-26, -13),
            })
            marker.setLabel({
                offset:new AMap.Pixel(0,0),//设置文本标注偏移量
                content:"<div>"+line.startPlace+"</div>",//设置文本标注内容
                direction:'bottom'//设置文本标注方位
            })
        },
        setEndMarker(line,path){
            const icon = new AMap.Icon({
                size: new AMap.Size(30, 30),    // 图标尺寸
                image: '/static/img/disposal_site_pos_icon.svg',  // Icon的图像
                imageSize: new AMap.Size(30, 30)   // 根据所设置的大小拉伸或压缩图片
            })
            const marker = new AMap.Marker({
                map: this.map,
                position: path[path.length - 1],
                icon: icon,
                offset: new AMap.Pixel(-26, -13),
            })
            marker.setLabel({
                offset:new AMap.Pixel(0,0),//设置文本标注偏移量
                content:"<div>"+line.endPlace+"</div>",//设置文本标注内容
                direction:'bottom'//设置文本标注方位
            })
        },
        getRandomColor(){
            return '#'+('00000'+ (Math.random()*0x1000000<<0).toString(16)).substr(-6);
        },

        showVideo(data){
            console.log(data)
            this.videoMonitoringVisible = true
            this.playDialogVehicleInfo = data
            console.log('this.$refs',this.$refs)
            // this.$refs['videoMonitoring'].initVideo()
        },

        stopPlayVideo(){
            this.$refs['videoMonitoring'].stopAll(false)
        },

        expandedNode(node){
            node.expanded = !node.expanded
        }
    },
    beforeDestroy () {
        clearInterval(this.realTimeTrackInterval)
        this.map.destroy()
        this.map = null
    },
    mounted () {
        this.initMap()
        this.getMapMarkCntStat()
        // this.getWorkSiteList()
        // this.getDisposalSiteList()
    }
}
</script>

<style scoped lang="scss">
.map-parent-view{
    width: 100%;
    height: 100%;
}

.top-button-view{
    width: 440px;
    height: 50px;
    position: absolute;
    top: 20px;
    left: calc(100% / 2 - 230px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 99;


    .top-view-item-car{
        background: url("/static/img/blue_bg.png");
        background-size: 100% 100%;
    }

    .top-view-item-worksite{
        background: url("/static/img/purple_bg.png");
        background-size: 100% 100%;
    }

    .top-view-item-disposalsite{
        background: url("/static/img/orange_bg.png");
        background-size: 100% 100%;
    }

    .top-view-item-line{
        background: url("/static/img/green_bg.png");
        background-size: 100% 100%;
    }

    .top-view-item{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
        margin-left: 5px;
        margin-right: 5px;
        .left{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-left: 4px;
        }

        .right{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .top{
                font-size: 12px;
            }
            .bottom{
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                .bottom-left{
                    font-size: 20px;
                    height: 20px;
                }
                .bottom-right{
                    font-size: 10px;
                    height: 20px;
                    display: flex;
                    flex-direction: row;
                    align-items: flex-end;
                    justify-content: flex-end;
                }
            }
        }
    }

}


.left-float-view{
    width: 350px;
    height: 550px;
    z-index: 999;
    cursor: default;
    background: #ffffff;
    position: absolute;
    left: 10px;
    top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;

    .header-view{
        width: 100%;
        height: 50px;
        position: relative;
        //background: #70b603;
        display: flex;
        flex-direction: row;
        align-items: center;

        .header-left{
            position: absolute;
            left: 10px;
            color:#FFFFFF;

        }
        .header-right{
            position: absolute;
            right: 0;

            .close-btn{
                width: 25px;
                height: 25px;
                cursor: pointer;
            }

        }

    }
    .bottom-view{
        width: 340px;
        height: 100%;

        .search-view{
            padding: 10px;
            border-radius: 3px;
        }

    }

    .car-type-view{
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        .car-item{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    }

    .tree-view{
        width: 340px;
        height: 420px;
        margin-top: 10px;


        /deep/ .el-scrollbar__wrap {
            overflow-x: hidden;
        }

    }

}



.vehicle-monitoring-dialog{
    width: 350px;
    height: 500px;
    cursor: default;
    position: relative;
    left: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .header-view{
        width: 100%;
        height: 30px;
        position: relative;
        background: #70B603;
        display: flex;
        flex-direction: row;
        align-items: center;

        .header-left{
            position: absolute;
            left: 10px;
            color:#FFFFFF;

        }
        .header-right{
            position: absolute;
            right: 10px;

        }

    }
    .bottom-view{
        width: 340px;
        height: 100%;
        margin-top: 10px;
    }

    .car-type-view{
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        .car-item{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    }

    .tree-view{
        width: 340px;
        height: 450px;


        /deep/ .el-scrollbar__wrap {
            overflow-x: hidden;
        }

    }

}

/deep/ .left-bottom-dialog{
    margin-left: 230px;
}

.tree-node-row{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.top-view-select{
    color: #00ff;
}

.top-view-default{
    color: #FFFFFF;
}

.right-bottom-float{
    width: 400px;
    height: auto;
    z-index: 999;
    position: absolute;
    right: 40px;
    bottom: 300px;
    background: #FFFFFF;

    .header-view{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        .header-left{
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            font-size: 20px;
            font-weight: bold;
            color: #000000;
            .title-icon{
                width: 25px;
                height: 25px;
                background: url("/static/img/lines_icon.png");
                background-size: 100% 100%;
                margin-right: 10px;
            }
        }

    }
    .bottom-view{
        width: 100%;
        height: 100%;
        margin-top: 10px;

        .form-view{
            width: 100%;
            display: flex;
            flex-direction: row;

            .form-left{
                width: 100%;
                flex: 4;
                .form-item{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    margin-top: 5px;
                    .left{
                        width: 100%;
                        flex: 2;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: end;
                        padding-right: 5px;
                    }
                    .right{
                        width: 100%;
                        flex:2.5;
                    }
                }

            }
            .form-right{
                width: 100%;
                flex: 1.2;
                display: flex;
                flex-direction: row;
                align-items: end;
                justify-content: end;
            }

        }
        .play-view{
            width: 100%;
            height: 100%;
        }


    }

}


.card-center{
    background:#F7FBFF;
    padding-top: 20px;
    padding-bottom: 30px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.bottom-view{
    .header-view{
        width: 100%;
        height: 50px;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;

        .header-left{
            position: absolute;
            left: 10px;
            color:#6D747E;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-size: 15px;

            .title-icon{
                background: url("/static/img/history_icon.png");
                width: 15px;
                height: 15px;
                background-size: 100% 100%;
                margin-right: 10px;
            }
        }
        .header-right{
            position: absolute;
            right: 0;

            .close-btn{
                width: 25px;
                height: 25px;
                cursor: pointer;
            }

        }

    }
}

/deep/ .el-dialog__body{
    padding: 10px;
}
</style>
